<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt>
                        <p>车辆类型</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt>
                        <p>下发状态</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>用户姓名</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>车辆品牌</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>车牌号码</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <GreenBtn>查询</GreenBtn>
                <BlueBtn @click.native="addCar">新增</BlueBtn>
                <BlueBtn>导入</BlueBtn>
            </div>
        </div>
        <div class="table">
            <el-table :data="filterCar.slice(pages, pages + 10)" border style="width: 100%">
                <el-table-column prop="CarNum" label="车牌号" width="210">
                </el-table-column>
                <el-table-column prop="Owner" label="持有人" width="160">
                </el-table-column>
                <el-table-column prop="Phone" label="手机号" width="240">
                </el-table-column>
                <el-table-column prop="CarBrand" label="车辆品牌" width="180">
                </el-table-column>
                <el-table-column prop="CarColor" label="车身颜色" width="180">
                </el-table-column>
                <el-table-column label="车辆图片" width="180">
                    <template slot-scope="scope">
                        <p @click="lookImg(scope.row)">查看图片</p>
                    </template>
                </el-table-column>
                <el-table-column prop="CarNumType" label="号牌类型" width="210">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(filterCar.length / 10) }}</span>页/<span>{{ filterCar.length
                            }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                    :current-page.sync=page :total="filterCar.length" hide-on-single-page>
                </el-pagination>
            </div>
        </div>
        <!-- 点击编辑弹框 -->
        <el-dialog title="提示" :visible.sync="editDialog" width="29%" :before-close="handleClose" class="editDialog">
            <el-form ref="editForm" :model="editForm" label-width="80px" :rules="rules">
                <el-form-item label="车牌号" prop="carNum">
                    <el-input v-model="editForm.carNum"></el-input>
                </el-form-item>
                <el-form-item label="持有人" prop="owner">
                    <el-input v-model="editForm.owner"></el-input>
                </el-form-item>
                <el-form-item label="车辆品牌" prop="carBrand">
                    <el-input v-model="editForm.carBrand"></el-input>
                </el-form-item>
                <el-form-item label="车身颜色" prop="carColor">
                    <el-input v-model="editForm.carColor"></el-input>
                </el-form-item>
                <el-form-item label="号牌类型" prop="carNumType">
                    <el-input v-model="editForm.carNumType"></el-input>
                </el-form-item>
                <el-form-item label="车辆图片">
                    <el-upload class="avatar-uploader" action="http://127.0.0.1/access/updated" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="editForm.imageUrl" :src="editForm.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="editSubmit('editForm')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击查看图片弹框 -->
        <el-dialog title="查看图片" :visible.sync="dialogImg" width="30%">
            <div class="dialogImg">
                <img :src="visitorIMg" alt="">
            </div>
        </el-dialog>
    </div>
</template>
<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import BlueBtn from '@/components/BlueBtn.vue';
export default {
    components: {
        BlueBtn,
        GreenBtn,
        SelectIpt,
        TextIpt
    },
    data() {
        return {
            page: 0,
            pages: 0,
            allCar: [],
            filterCar: [],
            editDialog: false,
            dialogImg: false,
            visitorIMg: '',
            editForm: {
                carNum: '',
                owner: '',
                carBrand: "",
                carColor: '',
                carNumType: "",
                imageUrl: '',
                id: '',
                index: '',
                flag: true
            },
            rules: {
                carNum: [
                    { required: true, message: '请输入车牌号', trigger: 'blur' },
                ],
                owner: [
                    { required: true, message: '请输入持有人', trigger: 'blur' },
                ],
                carBrand: [
                    { required: true, message: '请输入车辆品牌', trigger: 'blur' },
                ],
                carColor: [
                    { required: true, message: '请输入车辆颜色', trigger: 'blur' },
                ],
                carNumType: [
                    { required: true, message: '请输入号牌类型', trigger: 'blur' },
                ],
                imageUrl: [
                    { required: true, message: '请上传车辆图片', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        // 点击新增
        addCar() {
            this.editForm.carNum = ''
            this.editForm.owner = ''
            this.editForm.carBrand = ''
            this.editForm.carColor = ''
            this.editForm.carNumType = ''
            this.editForm.imageUrl = ''
            this.editForm.id = ''
            this.editForm.index = ''
            this.editDialog = true
            this.editForm.flag = false
        },
        lookImg(row) {
            this.visitorIMg = row.CarImg
            this.dialogImg = true
        },
        // 请求接口修改数据
        updateCar() {
            this.$axios.post('http://127.0.0.1/carManagement/updateCar', {
                ...this.editForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                if (res.data.message) {
                    this.$message.error(res.data.message);
                    return
                }
                this.editDialog = false
                this.getAllData()
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });

            }).catch(err => {
                console.log(err);
            })
        },
        // 点击编辑
        handleEdit(index, row) {
            this.editForm.carNum = row.CarNum
            this.editForm.owner = row.Owner
            this.editForm.carBrand = row.CarBrand
            this.editForm.carColor = row.CarColor
            this.editForm.carNumType = row.CarNumType
            this.editForm.imageUrl = row.CarImg
            this.editForm.id = row.ID
            this.editForm.index = index + this.pages
            this.editForm.flag = true
            this.editDialog = true

        },
        editSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!this.editForm.flag) {
                        this.updateCar()
                        return
                    }
                    let flag = false
                    if (this.filterCar[this.editForm.index].CarNum != this.editForm.carNum) {
                        this.filterCar[this.editForm.index].CarNum = this.editForm.carNum
                        flag = true
                    }
                    if (this.filterCar[this.editForm.index].Owner != this.editForm.owner) {
                        this.filterCar[this.editForm.index].Owner = this.editForm.owner
                        flag = true
                    }
                    if (this.filterCar[this.editForm.index].CarBrand != this.editForm.carBrand) {
                        this.filterCar[this.editForm.index].CarBrand = this.editForm.carBrand
                        flag = true
                    }
                    if (this.filterCar[this.editForm.index].CarColor != this.editForm.carColor) {
                        this.filterCar[this.editForm.index].CarColor = this.editForm.carColor
                        flag = true
                    }
                    if (this.filterCar[this.editForm.index].CarNumType != this.editForm.carNumType) {
                        this.filterCar[this.editForm.index].CarNumType = this.editForm.carNumType
                        flag = true
                    }
                    if (this.filterCar[this.editForm.index].CarImg != this.editForm.imageUrl) {
                        this.filterCar[this.editForm.index].CarImg = this.editForm.imageUrl
                        flag = true
                    }
                    if (flag) {
                        this.updateCar()
                        return
                    }
                    this.editDialog = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleAvatarSuccess(res, file) {
            this.editForm.imageUrl = 'http://127.0.0.1/uploads/' + res.filename
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.editDialog = false
                })
                .catch(_ => { });
        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
        getAllData() {
            this.$axios.get('http://127.0.0.1/carManagement/allCar', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.allCar = res.data
                this.filterCar = res.data

            }).catch(err => {
                console.log(err);
            })
        }
    },
    mounted() {
        this.getAllData()
    }
}
</script>

<style scoped>
.table p {
    color: #3399ff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.dialogImg {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.dialogImg img {
    width: 360px;
    height: 380px;
    object-fit: contain;
}

.editDialog>>>.el-input {
    width: 260px;
}

.editDialog>>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.table>>>.el-table {
    min-height: 530px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.top li {
    margin-bottom: 20px;
}
</style>